<script setup lang="ts">
import {reactive, ref, watch, nextTick, onActivated} from "vue";
import {template, deleteTemplate} from "../api/elastic.ts"
import JsonText from "@/components/JsonText.vue";
import {ElTree} from "element-plus";
import {Delete} from "@element-plus/icons-vue";
import {confirm, success} from "@/utils/message.ts";

type  KeyValuePair = {
  value: string,
  label: string;
}
const treeRef = ref<InstanceType<typeof ElTree>>()
const filterText = ref("");
const indices = ref([]);
const result = reactive({});
onActivated(() => {
  search();
})
watch(filterText, (value) => {
  treeRef.value.filter(value);
})

const index = ref('');

const onNodeClick = (data) => {
  index.value = data["value"];
}
const filterNode = (value: string, data: KeyValuePair) => {
  if (!value) return true
  return data.label.includes(value)
}
const search = () => {
  Object.keys(result).forEach(key => {
    delete result[key];
  })
  indices.value.splice(0, indices.value.length);
  template().then(res => {
    if (res && Object.keys(res).length > 0) {
      Object.assign(result, res);
      let sorts = Object.keys(res).sort((a, b) => a.localeCompare(b));
      indices.value.push(...sorts.map(data => {
        return {
          value: data, label: data
        }
      }));
      if (!index.value || !sorts.includes(index.value)) {
        index.value = sorts[0];
      }
      nextTick(() => {
        treeRef.value.setCurrentKey(index.value);
      })
    }
  })
}
const deleteTemplateByValue = ({value}, event: PointerEvent) => {
  event.preventDefault();
  event.stopPropagation();
  confirm("提示信息", "是否确认删除?").then(() => {
    deleteTemplate(value).then(res => {
      let subIndex = indices.value.findIndex(data => data.value === value);
      if (subIndex !== -1) {
        indices.value.splice(subIndex, 1);
      }
      if (index.value === value) {
        if (indices.value.length > 0) {
          nextTick(() => {
            treeRef.value.setCurrentKey(indices[0].value);
          })
        }
      }
      success("删除成功");
    })
  });
}
</script>

<template>
  <div>
    <el-row gutter="10">
      <el-col :span="4">
        <el-input v-model="filterText" placeholder="过滤" clearable></el-input>
        <div style="height: calc(100vh - 310px);width:100%;overflow: auto;">
          <el-tree
              ref="treeRef"
              :data="indices"
              highlight-current
              node-key="value"
              @node-click="onNodeClick"
              :filter-node-method="filterNode"
              :props=" { children: 'children', label: 'label' }"
          >
            <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <div>{{ node.label }}</div>
                  <div>
                     <el-button text :icon="Delete" @click="deleteTemplateByValue(data,$event)"></el-button>
                  </div>
                </span>
            </template>
          </el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <div style="height: calc(100vh - 130px);padding: 2px;border: solid 1px var(--el-border-color)">
          <JsonText v-if="index" :value="result[index]"></JsonText>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<style scoped>
.custom-tree-node {
  height: 30px;
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
</style>